{% extends 'base.html' %}
{% block title %}
    交叉表
{% endblock %}
{% block link %}
    <link rel="icon" href="{{ url_for('static', filename='images/icon.png') }}">
    <script src="{{ url_for('static', filename='js/jquery-3.6.0.js') }}"></script>
{% endblock %}

{% block style %}
    <style>
        .layui-table-cell {
            height: 50px;
            line-height: 50px;
        }

        .main {
            margin: -6px 0 0;

        }

        .layui-table td, .layui-table th, .layui-table-col-set, .layui-table-fixed-r, .layui-table-grid-down, .layui-table-header, .layui-table-page, .layui-table-tips-main, .layui-table-tool, .layui-table-total, .layui-table-view, .layui-table[lay-skin=line], .layui-table[lay-skin=row] {
            border-color: #0C0C0C;
        }


    </style>
{% endblock %}


{% block body %}
    <div class="main layui-bg-gray" style="text-align: center">
        <table class="layui-hide" id="cross" lay-filter="cross1"></table>
        <input id="crossData" type="hidden" value="{{ cross_data }}">
    </div>


    <script type="text/html" id="toolbar">
        <div style="font-size: 18px;">{{ cross_title }}</div>

    </script>

    <script type="text/html" id="showImg">
        <div onclick="show_img(this)"><img style="width: 50px; height: 50px" src="{{ '{{ d.image_url }}'|safe }}"/>
        </div>
    </script>

    <script src="{{ url_for('static', filename='layui/layui.js') }}"></script>
    <!-- 注意：如果你直接复制所有代码到本地，上述 JS 路径需要改成你本地的 -->

    <script>


        function handleParse(str) {
            return eval("(" + str + ")");
        }

        layui.use('table', function () {
            let table = layui.table;


            table.render({
                elem: '#cross',
                data: {{ cross_data|safe }},
                cellMinWidth: 90, //全局定义常规单元格的最小宽度，layui 2.2.1 新增
                toolbar: '#toolbar',
                defaultToolbar: [{title: '提示', layEvent: 'LAYTABLE_EXCEL', icon: 'layui-icon-edit'}],
                height: 'full-60',
                title: '交叉表',
                totalRow: false,
                limit: Number.MAX_VALUE,
                page: false,
                even: true,
                response: {
                    statusCode: 200 //重新规定成功的状态码为 200，table 组件默认为 0
                },
                cols: [{{ level_1|tojson }}, {{ level_2|tojson }}, {{ level_3|tojson }}],
                done: function (res, curr, count) {
                    // 修改表头颜色
                    $('th').css({'background-color': '#bdccea', 'color': 'black', 'font-weight': '500'})
                    $('th[data-field="attr"]').css({background: '#FFFFFF'})
                    $('th[data-field="image"]').css({background: '#FFFFFF'})
                    $('.layui-table-total .layui-table tbody tr').css({'color': 'red', 'background-color': '#ffffb4'});

                }
            });
            table.on('toolbar(cross1)', function (obj) {
                if (obj.event === 'LAYTABLE_EXCEL') {
                    window.location.href = '/cross/group/' +
                    {{ pk }}
                }
            });
            window.show_img = function (t) {
                var t = $(t).find("img");
                //页面层
                layer.open({
                    type: 1,
                    title: ['图片'],
                    {#skin: 'layui-layer-rim', //加上边框#}
                    area: ['60%', '75%'], //宽高
                    shadeClose: true, //开启遮罩关闭
                    end: function (index, layero) {
                        return false;
                    },
                    content: '<div style="text-align:center"><img style="width: 40%;height:650px"  src="' + $(t).attr('src') + '" /></div>'
                });
            }
        });
    </script>
{% endblock %}
